<template>
  <div class="inviteFriendsStatistics hideScrollBar">
    <ClientOnly>
      <!-- 导航 -->
      <NavBar
        :title="t('lotteryMoney.jijl')"
        isFixed
        :isShadow="false"
        @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
      />
      <!-- 工具栏 -->
      <div class="tool items-center">
        <!-- 左边 -->
        <van-tabs
          class="tool-left"
          v-model:active="pageData.menuType"
          line-width="0"
          line-height="0"
          :ellipsis="false"
          @click-tab="onClickTab"
        >
          <!-- 时间 -->
          <!-- <van-tab>
            <template #title>
              <div class="items-center tool-time">
                <div class="tool-time-text">{{ selectTime }}</div>
                <img
                  class="tool-time-icon"
                  src="/image/assetDetails/date-jt.svg"
                />
              </div>
            </template>
          </van-tab> -->
          <!-- 免费下注 -->
          <van-tab>
            <template #title>
              <div
                class="tool-menu-btn"
                :class="{ 'tool-menu-activity': pageData.menuType == 0 }"
              >
                {{ t("lotteryMoney.mfxz") }}
              </div>
            </template>
          </van-tab>
          <!-- BDC -->
          <van-tab>
            <template #title>
              <div
                class="tool-menu-btn"
                :class="{ 'tool-menu-activity': pageData.menuType == 1 }"
              >
                BDC
              </div>
            </template>
          </van-tab>
          <!-- 质押收益 -->
          <van-tab>
            <template #title>
              <div
                class="tool-menu-btn"
                :class="{ 'tool-menu-activity': pageData.menuType == 2 }"
              >
                {{ $t("lotteryMoney.pledgesy") }}
              </div>
            </template>
          </van-tab>
          <!-- 现金 -->
          <!-- <van-tab>
            <template #title>
              <div
                class="tool-menu-btn"
                :class="{ 'tool-menu-activity': pageData.menuType == 3 }"
              >
                {{ $t("lotteryMoney.money") }}
              </div>
            </template>
          </van-tab> -->
        </van-tabs>
      </div>
      <!-- 内容部分 -->
      <div
        class="contentview hideScrollBar"
        :style="{
          height: `calc(100vh - ${pageData.navBarHeight}px - 44px)`,
        }"
        :class="{
          'contentview-notdata-bg':
            !pageData.loading && pageData.list.length === 0,
        }"
      >
        <!-- 暂无内容 -->
        <div
          v-if="!pageData.loading && pageData.list.length === 0"
          class="contentview-notdata items-center"
        >
          <img class="contentview-notdata-img" src="/image/notdate-icon.png" />
          <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
        </div>
        <!-- 列表 -->
        <van-list
          v-else
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <!-- 免费下注 -->
          <InviteFriendsFreeCell
            v-if="pageData.menuType == 0 && pageData.list.length > 0"
            :list="pageData.list"
          ></InviteFriendsFreeCell>
          <!-- BDC -->
          <BdcCell
            v-if="pageData.menuType == 1 && pageData.list.length > 0"
            :list="pageData.list"
          ></BdcCell>
          <!-- 质押收益 -->
          <PledgeCell
            v-if="pageData.menuType == 2 && pageData.list.length > 0"
            :list="pageData.list"
          ></PledgeCell>
          <!-- 现金 -->
          <!-- <MoneyCell
            v-if="pageData.menuType == 3"
            :list="pageData.list"
          ></MoneyCell> -->
        </van-list>
      </div>
      <!-- 圆角弹窗（底部） -->
      <!-- <DatePicker
        v-model:show="pageData.isSHowPicker"
        @confirm="confirmTime"
      ></DatePicker> -->
    </ClientOnly>
  </div>
</template>
<script setup name="inviteFriendsStatistics">
import { useGlobalStore } from "~~/store/global";
import {
  getListFreeDrawPrizeRecord,
  getRegisterInvitePrizeRecord,
} from "@/api/inviteFriends";
import { useDateFormat } from "@vueuse/core";
// import DatePicker from "../../components/assetDetails/date-picker.vue";
import BdcCell from "@/components/lottery-v3/invite-friends-bdc-cell.vue";
import PledgeCell from "@/components/lottery-v3/invite-friends-pledge-cell.vue";
// import MoneyCell from "@/components/lottery-v3/invite-friends-money-cell.vue";
import InviteFriendsFreeCell from "@/components/lottery-v3/invite-friends-free-cell.vue";
// import { getFreeDrawPrizeRecord } from "@/api/inviteFriends";

const { t } = useI18n();
const route = useRoute();
console.log("页面参数:", route.query);

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  isSHowPicker: false,
  navBarHeight: 0,
  // 上拉加载属性
  loading: false,
  finished: false,
  prefixs: [], // 分类标识
  list: [],
  pageNum: 0,
  total: 0,
  // 筛选项
  startTime: 0,
  endTime: 0,
  menuType: 0, // 0:免费下注  1：BDC 2：质押收益 3: 美金
  selectType: 4, // -1：没有选择  1： 按月  2：按天 3：上个月 4：近3 个月 5：开始时间  6：结束时间
});

// const selectTime = computed(() => {
//   if (pageData.selectType === 1) {
//     return useDateFormat(pageData.startTime, "YYYY.M").value;
//   } else if (pageData.selectType === 3) {
//     return t("mvp.incomeStatement.sy");
//   } else if (pageData.selectType === 4) {
//     return t("mvp.zj90t");
//   } else if (pageData.selectType === 5 || pageData.selectType === 6) {
//     return `${useDateFormat(pageData.startTime, "YYYY.M.D").value}-${
//       useDateFormat(pageData.endTime, "YYYY.M.D").value
//     }`;
//   } else {
//     return t("mvp.incomeStatement.default");
//   }
// });

/**
 * @description: 上啦加载
 * @param {*} isRetry 重试一次
 * @author: zhj1214
 */
const onLoadList = (isRetry) => {
  console.log("1111", isRetry);

  pageData.pageNum += 1;
  getTableDataRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
      if (!isRetry) {
        setTimeout(() => {
          onLoadList(true);
        }, 3000);
      }
    }
  });
};

// 当前数据总和,用来判断是否还需要上啦加载
// const recordsTotal = computed(() => {
//   let total = 0;
//   pageData.list.forEach((yf) => {
//     if (yf.list) {
//       total += yf.list.length;
//     }
//   });
//   return total;
// });

// 免费下注数据加工; 1. 将一组数据分成三组: 未使用 已使用 已过期
const freeDrawPrizeFn = (res, call) => {
  if (res) {
    if (!res.records) res.records = [];
    // 1. 加工数据
    // let majorList = [];
    let wsyArr = []; // 未使用
    let ysyArr = []; // 已使用
    let ygqArr = []; // 已过期
    res.records.forEach((e, index) => {
      // 未使用: 获得时间
      if (e.sendTime) {
        const sendTime = useDateFormat(
          Number(e.sendTime),
          "YYYY-MM-DD HH:mm:ss"
        ).value;
        e.sendTimeStr = sendTime;
      } else {
        e.sendTimeStr = "--";
      }
      // 已使用: 使用时间
      if (pageData.menuType == 3) {
        e.useTimeStr = "--";
      }

      // 已过期: 过期时间
      if (e.recycleTime) {
        const recycleTime = useDateFormat(
          Number(e.recycleTime),
          "YYYY-MM-DD HH:mm:ss"
        ).value;
        e.recycleTimeStr = recycleTime;
      } else {
        e.recycleTimeStr = "--";
      }

      // 根据 countShow 数量进行复制多份,展示 
      if (Number(e.countShow) == 1) {
        // showStatus 1:未使用记录 2:过期记录 3:已使用
        e.id = `${e.id}-${0}-${e.showStatus}`;
        if (e.showStatus == 1) {
          wsyArr.push(e);
        } else if (e.showStatus == 3) {
          ysyArr.push(e);
        } else {
          ygqArr.push(e);
        }

        // 已使用: 使用时间
        if (e.useTimeList && e.useTimeList.length > 0) {
          e.useTimeStr = useDateFormat(
            Number(e.useTimeList[0]),
            "YYYY-MM-DD HH:mm:ss"
          ).value;
        } else {
          e.useTimeStr = "--";
        }
      } else if (Number(e.countShow) > 1) {
        let i = 0;
        while (i < Number(e.countShow)) {
          // 已使用: 使用时间
          if (e.useTimeList && e.useTimeList.length > 0) {
            e.useTimeStr = useDateFormat(
              Number(e.useTimeList[i]),
              "YYYY-MM-DD HH:mm:ss"
            ).value;
          } else {
            e.useTimeStr = "--";
          }
          //
          const copy = JSON.parse(JSON.stringify(e));
          copy.id = `${e.id}-${i}-${e.showStatus}`;
          if (e.showStatus == 1) {
            wsyArr.push(copy);
          } else if (e.showStatus == 3) {
            ysyArr.push(copy);
          } else {
            ygqArr.push(copy);
          }
          i += 1;
        }
      }
    });
    // 2. 合并数据
    // pageData.list = pageData.list.concat(majorList);
    pageData.list = [wsyArr, ysyArr, ygqArr];
    pageData.finished = true;
    // 由于免费卡特殊,无法使用分页
    call && call(true);
    // 3. 分页结束;
    // if (majorList.length == 0 && pageData.pageNum >= 1) {
    //   pageData.finished = true;
    // } else if (majorList.length < pageData.pageSize && pageData.pageNum >= 1) {
    //   pageData.finished = true;
    // }
    // 4. 回调
    // if (majorList && majorList.length > 0) {
    //   call && call(true);
    // } else {
    //   call && call(false);
    // }
  }
};

// BDC 数据加工
const bdcPrizeFn = (res, call) => {
  if (res) {
    if (!res.records) res.records = [];
    // 1. 加工数据
    let majorList = [];
    res.records.forEach((e, index) => {
      // 时间
      if (e.time) {
        const time = useDateFormat(Number(e.time), "YYYY-MM-DD HH:mm:ss").value;
        e.timeStr = time;
      } else {
        e.timeStr = "--";
      }

      majorList.push(e);
    });
    pageData.total = res.total;
    // 2. 合并数据
    pageData.list = pageData.list.concat(majorList);
    // 3. 分页结束
    if (majorList.length >= pageData.total) {
      pageData.finished = true;
    }
    // 4. 回调
    if (majorList && majorList.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  }
};
// 获取列表数据
const getTableDataRequest = async (call) => {
  pageData.loading = true;
  let api =
    pageData.menuType == 0
      ? getListFreeDrawPrizeRecord
      : getRegisterInvitePrizeRecord;

  let res = await api(
    pageData.menuType != 0
      ? {
          // beginTime: pageData.startTime,
          // endTime: pageData.endTime,
          queryType: pageData.menuType,
          pageNum: pageData.pageNum,
          pageSize: 20,
        }
      : {}
  );

  // zhjdebugger
  // res = null
  // zhjdebugger
  pageData.loading = false;

  console.log("--获取列表数据--", res);
  if (res) {
    if (pageData.menuType == 0) {
      freeDrawPrizeFn(res, call);
    } else {
      bdcPrizeFn(res, call);
    }
  }
  // 重试一次
  else {
    call && call(false);
  }
};

onBeforeMount(async () => {
  // 1. 默认 3 个月数据
  const begin = new Date(
    Number(globalStore.$state.serverTime) - 3 * 30 * 24 * 60 * 60 * 1000
  );
  // 设置开始时间是 90 前,那一天的 23 点 59 分 59 秒
  pageData.startTime = new Date(
    `${begin.getFullYear()}/${begin.getMonth() + 1}/${begin.getDate()} 23:59:59`
  ).getTime();

  // 结束时间是此时此刻
  pageData.endTime = Number(globalStore.$state.serverTime); // curt.getTime(); 使用服务器时间

  // console.log(
  //   "--开始时间--",
  //   useDateFormat(Number(pageData.startTime), "YYYY-MM-DD HH:mm:ss").value
  // );
  // 2.1 最大查询时间跨度 6 个月; 修改选择的时间范围,开始时间
  // const minStart = new Date(
  //   Number(globalStore.$state.serverTime) - 6 * 30 * 24 * 60 * 60 * 1000
  // );
  // startTimestamp.value = new Date(
  //   `${minStart.getFullYear()}/${
  //     minStart.getMonth() + 1
  //   }/${minStart.getDate()} 23:59:00`
  // ).getTime();
});

onMounted(() => {
  // 1. 埋点访问
  firebase?.logEvent("BDC_H5_lotteryv3_statistics_PUV");
  // 2. 请求数据
  onLoadList();
});
onBeforeUnmount(() => {
  // isSHowPicker_watch && isSHowPicker_watch();
});

// 下注记录,中奖记录
let menuTypeLast = 0; // 上一次选中的记录索引
const menuTypeChange = (val) => {
  // 1. 是否重置数据
  if (val !== menuTypeLast) {
    pageData.list = [];
    pageData.prefixs = [];
    pageData.finished = false;
  } else {
    return;
  }
  // 2. 赋值、请求新数据
  pageData.pageNum = 1;
  menuTypeLast = val;
  getTableDataRequest();
};

/**
 * @description: tab 切换
 */
const onClickTab = (val) => {
  console.log("val:", val);
  // if (val.name == 0) {
  //   pageData.isSHowPicker = true;
  // } else if (val.name > 0) {
  menuTypeChange(Number(val.name));
  // }
};

// 弹窗确认筛选时间
// const confirmTime = ({ start, end, type }) => {
//   // 1. 如果没有选择时间，则不做任何改变
//   if (start === 0 || end === 0) return;
//   // 2. 赋值属性
//   pageData.list = [];
//   pageData.prefixs = [];
//   pageData.startTime = start;
//   pageData.endTime = end;
//   pageData.pageNum = 1;
//   pageData.selectType = type;
//   pageData.finished = false;
//   pageData.menuType = menuTypeLast;
//   // 3. 请求接口
//   getTableDataRequest();
// };
// 监听弹窗显示,当弹窗关闭的时候,回显 tabs 的选中索引
// const isSHowPicker_watch = watch(
//   () => pageData.isSHowPicker,
//   (newVal) => {
//     if (!newVal) {
//       pageData.menuType = menuTypeLast;
//     }
//   }
// );
</script>
<style lang="scss" scoped>
.inviteFriendsStatistics {
  min-height: 100vh;
  background-color: #f0f3fa;

  .tool {
    position: relative;
    width: 100vw;
    height: 42 * 2px;
    background-color: #fff;

    &-time {
      padding-left: 8 * 2px;

      &-text {
        font-size: 12 * 2px;
        color: #007bff;
        font-weight: 650;
        white-space: nowrap;
      }

      &-icon {
        width: 10 * 2px;
        height: 10 * 2px;
        margin: 0 5 * 2px;
      }
    }
    &-menu {
      flex: 1;
      border-left: 1 * 2px solid #f5f5f5;
      padding-left: 5 * 2px;
      font-weight: 600;
      &-btn {
        text-wrap: nowrap;
        white-space: nowrap;
        font-size: 12 * 2px;
        color: #141924;
        padding: 6px 8 * 2px;
      }
      &-activity {
        color: #007bff !important;
        background-color: #ecf5ff !important;
        border-radius: 4 * 2px;
      }
    }

    &-left {
      width: 100vw;
      :deep(.van-tab--grow) {
        padding: 0 8px;
      }
    }
  }
  .contentview {
    padding-bottom: var(--safe-area-inset-bottom);
    // background-color: #f4f5f7;
    background-color: #fff;
    overflow-y: scroll;
    position: relative;
    &-header {
      padding: 16 * 2px 16 * 2px 0 16 * 2px;
      // margin-top: 10 * 2px;
      position: relative;
      top: 20px;
      height: 78 * 2px;
      z-index: 8;
      &-text {
        margin-top: 10 * 2px;
        color: #141924;
        font-size: 15 * 2px;
        font-weight: 590;
        letter-spacing: -0.8px;
      }
      &-left {
        position: relative;
        &-text {
          color: #141924;
          font-size: 13 * 2px;
          font-weight: 590;
          letter-spacing: -0.8px;
        }
        &-img {
          width: 16 * 2px;
          height: 16 * 2px;
          margin-right: 5 * 2px;
        }
      }
      &-img {
        border-top-right-radius: 12 * 2px;
        border-top-left-radius: 12 * 2px;
        position: absolute;
        top: 0;
        left: 0;
        // height: 107 * 2px;
      }
    }
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 200 * 2px;
        height: 200 * 2px;
      }
      &-desc {
        margin-top: -35 * 2px;
        color: #999da7;
        font-size: 13 * 2px;
      }
      &-bg {
        background-color: #fff !important;
      }
    }
  }
}
</style>
